<template>
  <!-- 动态获取国能集团的body属性进行设置，用以实现节假日时自动保持与集团风格一致 -->
  <!-- <div
    class="cms-layout-page"
    style="
      background-position: top center;
      background-repeat: no-repeat;
      padding-top: 251px;
      background-image: url(https://www.chnenergy.com.cn/gjnyjtww/jieri/202309/9f979d75e0ae46c2a5a63ec818e8f5f3/images/442759a7878e48c88e84278ce27019d4.png);
    "
  > -->
  <!-- 页面不设置样式时的dom -->
  <!-- <div class="cms-page"> -->
  <!-- 页面使用动态样式时的dom，从国家能源集团动态获取要设置的样式 -->
  <div class="cms-page" :style="cmsCategoryBodyStyle">
    <!-- 页面头部，显示logo、名称、搜索、导航栏目 -->
    <a-row justify="center" class="cms-layout-header-row">
      <a-col :xs="24" :lg="24" :xl="22" :xxl="18" class="cms-layout-header-content-container">
        <CmsHeader
          :currentCategoryIds="currentCategoryIds"
          :categories="cmsCommonData.categories"
          @clickMenuItem="onMenuItemClick"
          @keywordSearch="onGlobalSearch"
        />
      </a-col>
    </a-row>
    <!-- 栏目菜单在Header中一起显示时不单独显示CmsMenu，参考常用网站均会单独使用一整行显示导航栏目 -->
    <a-row justify="center">
      <a-col :xs="24" :lg="24" :xl="22" :xxl="18" class="cms-layout-header-categories-container">
        <CmsMenu
          :currentCategoryIds="currentCategoryIds"
          :categories="cmsCommonData.categories"
          @clickMenuItem="onMenuItemClick"
        />
      </a-col>
      <!-- 网页右侧客服二维码 -->
      <div v-if="projectCode === 'qckj'" class="dock">
        <ul class="icons">
          <!-- <li class="up"><i></i></li> -->
          <li class="tel">
            <i></i>
            <p
              >售前咨询：<a href="tel:18187120891">181 8712 0891</a><br />售后咨询：<a
                href="tel:18184800129'"
                >181 8480 0129</a
              ></p
            >
          </li>
          <li class="wechat">
            <i></i>
            <p>
              <img src="/public/images/AvantLaVente.png" alt="扫一扫业务咨询" /><span
                >业务咨询</span
              >
              <!-- <img src="/public/images/ApreLaVente.png" alt="扫一扫技术支持" /><span>技术支持</span> -->
            </p>
          </li>
          <!-- <li class="im">
            <i></i>
            <p
              >整体解决方案<br />在线沟通，请点击<a
                href="tencent://message/?uin=24770680&Site=&Menu=yes"
                target="_blank"
                >在线咨询</a
              ></p
            >
          </li> -->
          <!-- <li class="down"><i></i></li> -->
        </ul>
        <!-- <a class="switch"></a> -->
      </div>
    </a-row>
    <!-- 页面内容占位符 -->
    <a-row justify="center">
      <a-col :xs="22" :lg="22" :xl="22" :xxl="18">
        <RouterView>
          <template #default="{ Component, route }">
            <transition
              :name="
                getTransitionName({
                  route,
                  openCache,
                  enableTransition: getEnableTransition,
                  cacheTabs: getCaches,
                  def: getBasicTransition,
                })
              "
              mode="out-in"
              appear
            >
              <keep-alive v-if="openCache" :include="getCaches">
                <component
                  :is="Component"
                  :key="route.fullPath"
                  :getCategoryLayoutBodyStyle="onGetCategoryLayoutBodyStyle"
                />
              </keep-alive>
              <component
                v-else
                :is="Component"
                :key="route.fullPath"
                :getCategoryLayoutBodyStyle="onGetCategoryLayoutBodyStyle"
              />
            </transition>
          </template>
        </RouterView>
      </a-col>
    </a-row>
    <!-- 页面底部，显示友情链接、版权信息 -->
    <a-row justify="center">
      <a-col :xs="24" :lg="24" :xl="22" :xxl="18" class="cms-layout-footer-links">
        <CmsFooterLinks :linkcategories="cmsCommonData.linkcategories" />
      </a-col>
    </a-row>
    <a-row justify="center" class="cms-layout-footer-copyright">
      <a-col :xs="24" :lg="24" :xl="22" :xxl="18">
        <CmsCopyright />
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, onBeforeMount, unref, computed } from 'vue';
  import { getDisplayCommon } from '/@/api/cms/display'; // api

  import CmsHeader from './CmsHeader.vue';
  import CmsMenu from './CmsMenu.vue';
  import CmsFooterLinks from './CmsFooterLinks.vue';
  import CmsCopyright from './CmsCopyright.vue';
  // 使用同一个布局模板，分为栏目页(首页)、文章页2种页面显示
  // import CmsCategory from './CmsCategory.vue';
  // import CmsArticle from './CmsArticle.vue';

  // 使用layout模板需引入的文件
  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
  import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
  import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
  import { getTransitionName } from '/@/layouts/page/transition';
  import { useMultipleTabStore } from '/@/store/modules/multipleTab';

  import { useGo } from '/@/hooks/web/usePage';
  import { useCmsStore } from '/@/store/modules/cms';
  import { useGlobSetting } from '/@/hooks/setting';

  export default defineComponent({
    name: 'CmsLayout',
    components: {
      CmsHeader,
      CmsMenu,
      CmsFooterLinks,
      CmsCopyright,
    },
    setup() {
      const go = useGo();
      //使用store必须在setup中，否则会报错
      const cmsStore = useCmsStore();

      const { globalProjectCode } = useGlobSetting();
      const projectCode = ref<String>(globalProjectCode);

      const cmsCommonData = reactive({ categories: [], linkcategories: [] });
      const currentCategoryIds = ref<string[]>([]);
      const currentCategoryId = ref<string>('');

      //定义body的样式属性值，用于从国家能源集团网站获取样式进行动态设置
      const cmsCategoryBodyStyle = ref(null);

      /**
       * 接收栏目中布局配置中的bodyStyle设置，可以为空
       * @param bodyStyle
       */
      function onGetCategoryLayoutBodyStyle(bodyStyle) {
        console.log('onGetCategoryLayoutBodyStyle ', bodyStyle);
        cmsCategoryBodyStyle.value = bodyStyle;
      }

      //获取前端显示的公用信息，获取栏目菜单、友情链接信息
      function getDisplayCommonData() {
        getDisplayCommon()
          .then((res) => {
            console.log('getDisplayCommon res', res);
            cmsCommonData.categories = res.categories;
            cmsCommonData.linkcategories = res.linkcategories;
          })
          .catch((ex) => {
            console.log('getDisplayCommon ex', ex);
          });
      }

      //栏目菜单中点击事件，得到点击的栏目ID，更新内容显示
      function onMenuItemClick(clickCategory) {
        console.log('CmsLayout onMenuItemClick', clickCategory);
        //获取栏目ID
        let categoryId = clickCategory.id;
        currentCategoryId.value = categoryId;

        //2023-8-14，修改为根据栏目的内容进行判断
        //如果栏目没有内容或内容为空，根据栏目ID进行跳转到栏目查看的路由
        //如果栏目内容不为空，判断为url或路由；如果以http或https开头表示为外部地址，使用新窗口打开；否则在当前窗口中进行路由跳转
        let categoryContent = clickCategory.content;
        if (!categoryContent || Object.keys(categoryContent).length == 0) {
          //使用store存储跳转路由需传递的数据
          cmsStore.setCmsRouteParam({
            isArticle: false,
            id: categoryId,
          });

          //把首页也当做1个栏目，均使用栏目页面进行展示
          //后台可以在栏目中设置信息，前端根据设置信息显示
          //设置信息包含:每个栏目：是否在父栏目中列出文章、在父栏目中是显示文章列表还是显示文章提要、在父栏目中的显示顺序、在父栏目中的显示宽度n/24
          go('/cms/category/' + categoryId);
        } else {
          let httpPrefixIndex = categoryContent.indexOf('http');
          if (httpPrefixIndex > -1) {
            //打开外部链接，链接地址为栏目的content
            // window.open('https://www.baidu.com/s?wd=' + clickCategory.id);`
            window.open(categoryContent);
          } else {
            //使用content作为路由进行跳转
            go(categoryContent);
          }
        }
      }

      /**
       * 根据关键字搜索新闻
       */
      function onGlobalSearch(data) {
        console.log('onGlobalSearch', data);
        if (data != null) {
          //使用store存储跳转路由需传递的数据
          cmsStore.setCmsRouteParam({
            isArticle: false,
            keywords: data,
          });

          go('/cms/displaySearch/' + data);
        }
      }

      //请求后台数据，用于传递给子组件
      onBeforeMount(() => {
        //获取cms显示的信息，栏目配置
        getDisplayCommonData();
      });

      // 使用layout模板所需定义
      const { getShowMultipleTab } = useMultipleTabSetting();
      const tabStore = useMultipleTabStore();

      const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();

      const { getBasicTransition, getEnableTransition } = useTransitionSetting();

      const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab));

      const getCaches = computed((): string[] => {
        if (!unref(getOpenKeepAlive)) {
          return [];
        }
        return tabStore.getCachedTabList;
      });

      return {
        currentCategoryId,
        currentCategoryIds,
        cmsCategoryBodyStyle,
        cmsCommonData,
        getTransitionName,
        getDisplayCommonData,
        onMenuItemClick,
        onGlobalSearch,
        onGetCategoryLayoutBodyStyle,
        openCache,
        getEnableTransition,
        getBasicTransition,
        getCaches,
        getCanEmbedIFramePage,
        projectCode,
      };
    },
  });
</script>
<style scoped lang="less">
  @import './cms.less';
  @import './kefu.less';
</style>
